  
<template>
    <div class="main">
        <div>
            <h1 style="text-align: center;">新闻大事件</h1>
        </div>
        <div class="content">
        <div class="newimg">
            <img class="b" src="../../resource/向日葵.png">
        </div>
            <el-card class="box-card" style="display: block;">
                <div v-for="item in table" class="textnew">
                    <el-link type="info" @click="dialogVisible = true">{{item.title}}</el-link>
                    <h style="font-size: 10px;text-align: right;">{{ item.date }}</h>
                    <br>
                    <el-dialog title="内容" :visible.sync="dialogVisible" width="30%">
                        <p>{{ item.content }}</p>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">关 闭</el-button>
                        </span>
                        </el-dialog>
                </div>
            </el-card>

        </div>

</div>
</template>


<script>
export default{

    data(){
        return{
            dialogVisible:false,
            table:[]
        }
    },
    created(){
        this.$axios.post('/news/newsList',{},{
              headers:{
                "token":JSON.parse(localStorage.getItem('user')).token
              } 
              })
              .then(res=>{
                if(res.data.msg=="success"){
                    this.form = res.data.data,
                    this.table = this.form
                }
              })
    }
}
</script>



<style>
.content{
    display: flex;
    flex-wrap:wrap;
}
.newimg{
    width: 45%;
    margin: 10px;
    text-align: right;
}
    .textnew {
      font-size: 14px;
      height: 30px;
      width: 400px;
      margin-left: 10px;
      margin-right: 10px;
    }
  
  
    .box-card {
      width: 480px;
    }
</style>